@black: #292929;
@bg:#f3f2f2;
@blue:#5dd3dc;

/*全局重写*/
body, input{
    font-family:"PingFang SC",Roboto,"Noto Sans CJK SC", "Source Han Sans CN", "microsoft yahei", Arial, sans-serif;
}
body,
.mui-content{
    background: @bg;
    color: @black;
    line-height: 1.2;
}
.mui-title{
    color: @black;
}
a{
    color: inherit;
    &:link, &:visited, &:hover, &:active{
        color: inherit;
    }
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
}
::-webkit-input-placeholder
{
    color: #999; 
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px white inset; 
}
.mui-action-back{
    color: #666;
}
.mui-popup-button{
    font-weight: 600;
    font-size: 18px;
    color: @black;
    &.mui-popup-button-bold{
        font-weight: 600;
    }
}
.mui-popup{
    border-radius: 7px;
}
.mui-popup-inner{
    padding: 25px 15px;
    border-radius: 7px 7px 0 0;
}
.mui-popup-title+.mui-popup-text{
    font-size: 18px;
}
.mui-popup-inner:after{
    background: @bg;
}
.mui-popup-button:first-child{
    border-radius: 0 0 0 7px;
}
.mui-popup-button:last-child{
    border-radius: 0 0 7px 0;
}
.mui-bar{
    background: #fff;
    box-shadow: 0px 1.5px 6.5px 0 rgba(93,228,208,0.2);
//  &.shadowing{
//      box-shadow: 0px 1.5px 6.5px 0 rgba(93,228,208,0.2);
//  }
    .mui-btn-link{
        font-size:18px;
        color:@blue;
        padding: 10px;
        line-height:24px;
    }
    .mui-title{
        pointer-events: none;
        font-size: 24px;
    }
    .svg-icon-wrap{
        font-size: 25px;
    }
    .mui-tab-label{
        display: block;
        font-size: 12px;
        line-height: 14px;
    }
    .mui-btn-link{
        
    }
}
.mui-iframe-wrapper{
    -webkit-overflow-scrolling:touch;
    overflow:auto;
    iframe{
        vertical-align: middle;
    }
}
.svg-icon-wrap{
    .svg-icon{
        display: inline-block;
    }
    .svg-icon.active{
        display: none;
    }
    &.active{
        .svg-icon{
            display: none;
        }
        .svg-icon.active{
            display: inline-block;
        }
    }
}
.mui-bar-tab{
    .mui-tab-item{
        color:#888;
        .svg-icon{
            display: inline-block;
        }
        .svg-icon.active{
            display: none;
        }
        &.mui-active{
            color: #292929;
            .svg-icon.active{
                display: inline-block;
            }
            .svg-icon{
                display: none;
            }
        }
        &.z-new{
            position: relative;
            .mui-tab-label:after{
                content: '';
                position: absolute;
                height: 8px;
                width: 8px;
                top: 2px;
                left: 50%;
                margin-left: 6px;
                background: red;
                border-radius: 50%;
            }
        }
    }
} 
.mui-table-view-cell{
    &:after{
        left:0;
        background-color:@bg;
    }
}
.mui-table-view{
    &:after{
        background-color:@bg;
    }
}
.mui-navigate-right:after{
    color:#595959;
}
.mui-pull-bottom-pocket{
    height: 50px;
    bottom: 10px;
}
/*公共组件样式*/
.svg-icon{
    /* 仅适用于多色icon */
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.mui-btn-grad-blue{
    color: #fff;
    padding: 8px 0;
    background: #f90;
    border:none;
    font-size: 18px;
    border-radius: 7px;
    background: linear-gradient(#5dcae3, #5dd9d7);
    &.mui-loading .mui-spinner{
        display: inline-block;
    }
}
.charhalf{
    padding: 0 0.25em;
}
.char1{
    padding: 0 0.5em;
}
.char2{
    padding: 0 1em;
}
/*自定义样式*/
.ju-index-wrap{
    position: relative;
    &>.baseinfo{
        position: relative;
        width: 100%;
        height: 0;
        z-index: 3;
        padding: 15% 0 44.2% 34px;
        line-height: 1.6;
        .name{
            font-size: 30px;
            color: #fff;
        }
        .wel{
            font-size: 24px;
            color: #fff;
        }
    }
    &>.bg{
        height: 0;
        width: 100%;
        padding-bottom: 70.66666%;
        background: url(../image/bg-home.png) repeat-x 0 0;
        background-size:107%;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        pointer-events: none;
    }
    @media screen and (min-width:414px){
        .bg{
            padding-bottom: 243px;    
            background: url(../image/bg-home.png) repeat-x;
            background-size: contain;
        }
        .baseinfo{
            padding: 62px 0 160px 34px;
        }
    }
    &>.enters{
        position: relative;
        z-index: 1;
        padding: 0 25px;
        .link{
            .svg-icon.active{
                display: none;
            }
            .svg-icon{
                display: inline-block;
            }
            //filter: grayscale(100%);
        }
        .link.active{
            .svg-icon.active{
                display: inline-block;
            }
            .svg-icon{
                display: none;
            }
        }
    }
}
.ju-enters-list{
    li{
        height: 80px;
        line-height: 80px;
        text-align: right;
        background: #fff;
        border-radius: 5px;
        margin: 0 0 15px 0;
    }
    .svg-icon{
        float: left;
        font-size: 50px;
        margin: 15px 20px;
    }
    .link{
        display: block;
        padding-right: 18px;
        font-size: 18px;
    }
}
.ju-cards{
    margin-bottom: 10px;
    &>.card{
        &.active{
            .img-wrap{
                &.img-light1,
                &.img-light2{
                    background-position: 0 0;
                }
            }
            .svg-icon{
                display: none;
            }
            .svg-icon.active{
                display: inline-block;
            }
        }
        &>.cont{
            .img-wrap{
                width: 100%;
                height: 0;
                padding-bottom: 50%;
                background-position:0 -100%;
                background-repeat: nno-repeat;
                background-size: 100%;
                &.img-light1{
                    background-image: url(../image/img-light1.png);
                }
                &.img-light2{
                    background-image: url(../image/img-light2.png);
                    
                }
            }
        }
        &>.opt{
            height: 50px;
            line-height: 50px;
            background: #fff;
            padding: 0 15px 0 20px;
            display: table;
            width: 100%;
            vertical-align: middle;
            .svg-icon-wrap{
                display: table-cell;
                font-size: 36px;
            }
            .cont{
                display: table-cell;
                direction: rtl;
            }
        }
    }
}
.ju-ul-list{
    margin-bottom: 10px;
    &>li{
        height: 50px;
        line-height: 50px;
        display: table;
        width: 100%;
        padding: 0 15px 0 20px;
        background: #fff;
        position: relative; 
        &:after{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: @bg;
            transform: scaleY(0.5);
        }
        label{
            display: table-cell;
        }
        &>.cont{
            vertical-align: middle;
            display: table-cell;
            direction: rtl;
        }
    }
}
.ju-ctrl-acs,
.ju-ctrl-temper{
    .card{
        &>.opt{
            height: 75px;
            line-height: 75px;
        }
    }
}
.ju-ctrl-acs{
    .img-acs{
        background-image: url(../image/img-acs.png);
        background-size: 100%;
        position: relative;
        .doors{
            position: absolute;
            width: 100%;
            height: 0;
            padding-bottom: 42.3333%;
            bottom: 0;
            div{
                position: absolute;
//              background: url(../image/door.png) no-repeat 0 0;
//              background-size: 100%;
                background: linear-gradient(rgba(0,0,0,0),rgba(185, 211, 238,0.8));
                border-left:1px solid #aaa;
                border-right:1px solid #aaa;
            }
            .dr1, .dr2, .dr3, .dr4,.dr5, .dr6{
                transition: all .5s;
            }
            .dr1, .dr4{
                z-index: 3;
            }
            .dr2, .dr5{
                z-index: 2;
            }
            .dr3, .dr6{
                z-index: 1;
            }
        }
    }
}
.ju-ctrl-temper{
    .img-temper{
        background-image: url(../image/img-temper.png);
        background-size: 100%;
        .fan-table{
            width: 100%;
            height: 0;
            padding-bottom: 34.13333%;
            position: relative;
        }
        .fan{
            display: block;
            width: 93px; 
            height: 105px;
            background: url(../image/fan-frames.png) 0 bottom no-repeat;
            background-size: 1000%;
            position: absolute;
            left: 36px;
            bottom: 0;
            @media screen and (max-width:320px){
                width: 79px; 
                height: 89px;
                left: 28px;
            }
            @media screen and (min-width:568px){
                width:121px; 
                height: 136.5px;
                left: 64px;
            }
        }
        @keyframes rolling{
          0% {
            background-position: 0%;
          }
          100% {
            background-position: 100%;
          }
        }
        [data-speed="0"],
        .fan-speed1{
            animation: rolling steps(9) 1200ms infinite both;
        }
        [data-speed="1"],
        .fan-speed2{
            animation: rolling steps(9) 500ms infinite both;
        }
        [data-speed="2"],
        .fan-speed3{
            animation: rolling steps(9) 100ms infinite both;
        }
    }
    .ju-enters-list{
        margin-top: -5px;
        padding: 0 25px;
        li{
            position: relative;
            margin-bottom: 10px;
            overflow: hidden;
            &.z-touch{
//              box-shadow:0px 3px 8px 0.5px rgba(189,189,189,0.4);
                animation: touchingshadow 600ms ease 1;
            }
            .link{
                padding:0 30px 0 8px;
                position: relative;
                z-index: 2;
            }
            &.z-touch:before{
                content: "";
                background: #ecebeb;
                height: 2px;
                width: 2px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1px;
                margin-left: -1px;
                animation: touching 600ms ease 1;
                z-index: 1;
            }
        }
    }
}
//@keyframes touching{
//0% {
//  transform: scale(0);
//}
//100% {
//  transform: scale(170);
//}
//}
@keyframes touchingshadow{
  0% {
    box-shadow:none;
  }
  100% {
    box-shadow:0px 3.5px 8.5px 0.9px rgba(189,189,189,0.4);
  }
}
@keyframes touchingbg{
  100% {
    background: #fff;
  }
  0% {
    background: rgba(189,189,189,0.2);
  }
}
.ju-ctrl-tv{
    .img-tv{
        background-image: url(../image/img-tv.png);
        background-size: 100%;
    }
    .tv-opts{
        padding: 16px 20px;
        .ctrl1{
            height:94px;
            @media screen and (max-width:320px){
                height:64px;
            }
            .power{
                float: left;
            }
            .cancel{
                float: right;
            }
        }
        .power,
        .cancel{
            background: #fff;
            border-radius: 13px;
            height: 44px;
            width: 32%;
            line-height: 44px;
            text-align: center;
            position: relative;
            overflow: hidden;
            .iconfont{
                font-size: 28px;
                color: #5ecbe3;
            }
            &.z-touch{
                animation: touchingshadow 600ms ease 1;
            }
            &.z-touch:before{
                content: "";
                background: rgba(185,185,185,0.2);
                height: 2px;
                width: 2px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1px;
                margin-left: -1px;
                animation: touching 600ms ease 1;
                z-index: 1;
            }
        }
        .ctrl2{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            position: relative;
            border-radius: 42px;
            overflow: hidden;
            .left,
            .right,
            .up,
            .down{
                position: absolute;
            }
            .bg{
                position: absolute;
                width: 140px;
                height: 140px;
                background: #fff;
                transform: rotate(45deg);
                transform-origin:50% 50%;
                transform-style:preserve-3d;
                overflow: hidden;
                z-index: 4;
                &.z-touch{
                    animation: touchingbg 600ms ease 1;
                }
//              &.z-touch:after{
//                  content: "";
//                  background: rgba(0,0,0,0.1);
//                  height: 4px;
//                  width: 4px;
//                  border-radius: 50%;
//                  position: absolute;
//                  left: 32px;
//                  top: 32px;
//                  margin-top: -1px;
//                  margin-left: -1px;
//                  animation: touching 600ms ease 1;
////                  transform: scale(170);
//              }
            }
            .icon-wrap{
                position: absolute;
                display: block;
                height: 40px;
                width: 40px;
                overflow: hidden;
                line-height: 40px;
                text-align: center;
                z-index: 5;
                pointer-events: none;
                transform-origin: 50% 50%;
                .iconfont{
                    font-size: 30px;
                    color: #5ECBE3;
                }
            }
            .left{
                width: 50%;
                height: 100%;
                top: 0;
                left: 0;
                .bg{
                    left: -70px;
                    top: 30px;
                }
                .icon-wrap{
                    left: 0;
                    top: 50%;
                    transform:rotate(-90deg)  translateX(50%);
                }
            }
            .right{
                width: 50%;
                height: 100%;
                top: 0;
                right: 0;
                .bg{
                    right: -70px;
                    top: 30px;
                }
                .icon-wrap{
                    right: 0;
                    top: 50%;
                    transform:rotate(90deg) translateX(-50%);
                }
            }
            .down{
                width: 100%;
                height: 50%;
                left: 0;
                bottom: 0;
                .bg{
                    right: 30px;
                    bottom: -70px;
                }
                .icon-wrap{
                    bottom: 0;
                    left: 50%;
                    transform: rotate(180deg);
                    margin-left: -20px;
                }
            }
            .up{
                width: 100%;
                height: 50%;
                left: 0;
                top: 0;
                .bg{
                    right: 30px;
                    top: -70px;
                }
                .icon-wrap{
                    top: 0;
                    left: 50%;
                    margin-left: -20px;
                }
            }
        }
        .confirm{
            height: 77px;
            width: 77px;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 13px;
            transform: translate(-50%, -50%);
            background: #fff;
            color: #5ECBE3;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            line-height: 77px;
            border: 2px solid #F3F2F2;
            overflow: hidden;
            z-index: 9;
            &.z-touch{
                animation: touchingshadow 600ms ease 1;
            }
            &.z-touch:before{
                content: "";
                background: rgba(185,185,185,0.2);
                height: 2px;
                width: 2px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1px;
                margin-left: -1px;
                animation: touching 600ms ease 1;
            }
        }
        .left{
            .icon-wrap{
                left: 0;
                top: 50%;
                transform:rotate(-90deg)  translateX(50%);
            }
        }
        .right{
            .icon-wrap{
                right: 0;
                top: 50%;
                transform:rotate(90deg) translateX(-50%);
            }
        }
        .down{
            .icon-wrap{
                bottom: 0;
                left: 50%;
                transform: rotate(180deg);
                margin-left: -32px;
            }
        }
        .up{
            .icon-wrap{
                top: 0;
                left: 50%;
                margin-left: -32px;
            }
        }
    }
    .ctrl3{
        height: 200px;
        width: 200px;
        position: relative;
        margin: 0 auto;
        .btn{
            position: absolute;
            width: 140px;
            height: 140px;
            background: transparent;
            transform: rotate(45deg);
            transform-origin:50% 50%;
            transform-style:preserve-3d;
            overflow: hidden;
            z-index: 4;
            &.z-touch{
                animation: touchingbg 600ms ease 1;
            }
        }
        .icon-wrap{
            position: absolute;
            display: block;
            height: 64px;
            width: 64px;
            overflow: hidden;
            line-height: 40px;
            text-align: center;
            z-index: 5;
            transform-origin: 50% 50%;
            .iconfont{
                font-size: 30px;
                color: #5ECBE3;
            }
        }
        .confirm{
            height: 77px;
            width: 77px;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 14px;
            transform: translate(-50%, -50%);
            background: #fff;
            color: #5ECBE3;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            line-height: 77px;
            border: none;
            overflow: hidden;
            z-index: 4;
            &.z-touch{
                animation: touchingshadow 600ms ease 1;
            }
            &.z-touch:before{
                content: "";
                background: rgba(185,185,185,0.2);
                height: 2px;
                width: 2px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1px;
                margin-left: -1px;
                animation: touching 600ms ease 1;
            }
        }
        .bg{
            z-index: 3;
            &.z-touch{
                animation: touchingshadow 600ms ease 1;
            }
            &.z-touch:before{
                content: "";
                background: rgba(185,185,185,0.2);
                height: 2px;
                width: 2px;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -1px;
                margin-left: -1px;
                animation: touching 600ms ease 1;
            }
        }
        .left,
        .right{
            position: absolute;
            height: 200px;
            width: 64px;
            top: 0px;
            &.z-touch:after{
                height: 200px;
                width: 100px;
                position: absolute;
                left:  -18px;
                top:0;
                content: "";
                background-size: 100%;
                z-index: 2;
                opacity: 0.5;
            }
            .bg{
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                background-size: 100%;
                opacity: 0.7;
            }
        }
        .left{
            left: 0;
            .btn{
                left: -70px;
                top: 30px;
            }
            &.z-touch:after{
                background-image: url(../image/bg-tv-btn-left-shadow.png);
            }
            .bg{
                background:#fff;
                -webkit-mask-image: url(../image/bg-tv-btn-left.png);
                -webkit-mask-size: 100%;
            }
        }
        .right{
            right: 0;
            &.z-touch:after{
                background-image: url(../image/bg-tv-btn-right-shadow.png);
            }
            .bg{
                background:#fff;
                -webkit-mask-image: url(../image/bg-tv-btn-right.png);
                -webkit-mask-size: 100%;
            }
        }
        .up,
        .down{
            position: absolute;
            height: 64px;
            width: 200px;
            left: 0;
            &.z-touch:after{
                height: 100px;
                width: 200px;
                position: absolute;
                right:0;
                top:-18px;
                content: "";
                background-size: 100%;
                z-index: 2;
                opacity: 0.5;
            }
            .bg{
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
            }
            .btn-area{
                height: 100%;
                width: 100%;
                border-radius: 42px 42px 0 0;
                overflow: hidden;
                position: relative;
            }
        }
        .up{
            top: 0;
            &.z-touch:after{
                background-image: url(../image/bg-tv-btn-up-shadow.png);
            }
            .bg{
                background:#fff;
                -webkit-mask-image: url(../image/bg-tv-btn-up.png);
                -webkit-mask-size: 100%;
            }
            .btn{
                left: 30px;
                top: -70px;
            }
        }
        .down{
            bottom: 0;
            &.z-touch:after{
                background-image: url(../image/bg-tv-btn-down-shadow.png);
            }
            .bg{
                background:#fff;
                -webkit-mask-image: url(../image/bg-tv-btn-down.png);
                -webkit-mask-size: 100%;
            }
        }
    }
}
.ju-login-wrap{
    height: 100vh;
    position: relative;
    background: #fff;
    .loginmask{
        width: 100%;
        height: 0;
        padding-bottom: 75.2%;
        background:url(../image/bg-login.png) no-repeat 0 0;
        background-size: 100%;
    }
    .link{
        display: inline-block;
        font-size: 18px;
        line-height: 36px;
        padding: 0 9px;
        margin: 16px 20px;
    }
    .logo-wrap{
        display: flex;
        align-items: center;
    }
    .svg-logo{
        display: inline-block;
        font-size: 150px;
        margin: 0 auto;
        line-height: 100%;
        padding-top: 50px;
        @media screen and (max-width:320px){
            font-size: 130px;
            padding-top: 40px;
        }
        @media screen and (min-width:414px){
            font-size: 160px;
            padding-top: 60px;
        }
        @media screen and (min-width:568px){
            font-size: 220px;
            padding-top: 80px;
        }
        @media screen and (min-width:768px){
            font-size: 300px;
            padding-top: 100px;
        }
    }
    .cont{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        min-height: 568px;
        .copyright{
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            color: @blue;
            font-size: 12px;
            text-align: center;
        }
    }
}
.ju-form{
    margin: 0 32px;
    .mui-input-row{
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        &:after{
            content: "";
            height: 1px;
            background: #c1c1c1;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            transform: scaleY(0.5);
        }
        label{
            flex: none;
            width: 64px;
            padding: 11px 15px 11px 0;
            font-size: 18px;
        }
        input{
            flex: auto;
            font-size: 15px;
        }
        .iconfont{
            font-size: 12px;
            line-height: 41px;
        }
        .pwd-clear{
            flex: none;
            padding: 0 10px;
            color: #666;
            visibility: hidden;
        }
        .pwd-visible{
            flex: none;
            display: inline-block;
            padding:0 10px;
            color: #666;
            width: 42px;
            .icon-visible{
                display: inline-block;
            }
            .icon-invisible{
                display: none;
            }
            &.invisible{
                .icon-visible{
                    display: none;
                }
                .icon-invisible{
                    display: inline-block;
                }
            }
        }
    }
    .opts{
        margin-top: 36px;
    }
}
.ju-login-form{
    background: transparent;
    margin-top: 40%;
}
.ju-reg-form{
    .mui-input-row label{
        width: 102px;
    }
}
.ju-reg-wrap{
    h2{
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin: 25px 35px;
    }
}
.ju-home-wrap{
    .mui-table-view{
        background: transparent;
    }
    .mui-table-view-cell{
        background: #fff;
        padding: 12px 15px;
        .cont{
            position: absolute;
            right: 32px;
        }
        .mui-media-body{
            margin-left: 70px;
            font-size: 24px;
            p{
                color: #292929;
                font-size: 17px;
                line-height: 1.4;
            }
        }
    }
    .mui-table-view:before,
    .mui-table-view:after{
        height: 0;
    }
    .mui-table-view-cell:after{
        left: 0;
        height: 0;
        background-color: @bg;
    }
    .baseinfo{
        margin-bottom: 25px;
    }
    .manage-list{
        .mui-table-view-cell:nth-child(1),
        .mui-table-view-cell:nth-child(2){
            &:after{
                height: 1px;
            }
        }
        .version-cell{
            margin: 25px 0;
            &:after{
                height: 0;
            }
        }
        .cell-bottom{
            margin: 0 0 25px 0;
            &:after{
                height: 0;
            }
        }
        .logout-cell{
            text-align: center;
            &:after{
                height: 0;
            }
        }
        .mui-table-view-cell.z-new{
            .cont:after{
                content: '';
                display: inline-block;
                height: 9px;
                width: 9px;
                border-radius: 50%;
                background: red;
                vertical-align: 1px;
                margin: 0 0 0 6px;
            }
        }
    }
    .manager-avatar{
        display: inline-block;
        height: 50px;
        width: 50px;
        border-radius: 5px;
        background: #5dd3dc;
        color: #fff;
        text-align: center;
        .iconfont{
            font-size: 30px;
            font-weight: 300;
            line-height: 50px;
        }
    }
}
.ju-permissions-pull-wrap{
    height: 100vh;
    padding-bottom: 20px;
    overflow: hidden;
}
.ju-permissions-wrap{
    overflow: scroll;
    height: 100vh;
    padding-bottom: 50px;
}
.ju-card-list{
    .tip-empty{
        padding: 30px;
    }
    .mui-card{
        margin: 10px 12px;
        box-shadow: none;
    }
    .mui-card-header{
        color: @blue;
        margin-left: -2px;
        &:after{
            height: 0;
        }
    }
    .title{
        flex: auto;
        font-size: 15px;
    }
    .infolist{
        margin:0 16px 15px 16px;
        line-height: 28px;
        dt{
            float: left;
            color: #999;
            font-size: 15px;
        }
        dd{
            overflow: hidden;
            font-size: 18px;
        }
    }
    .mui-card-footer:before{
        background: @bg;
    }
    .mui-card-link{
        flex: auto;
        font-size: 18px;
        justify-content:center;
        color: @blue;
        &.default{
            color: #666;
        }
    }
}
.ju-records-wrap{
    display:flex;
    flex-direction: column;
    height:100vh;
    overflow:hidden;
}
.mui-bar-nav~.ju-records-wrap .mui-pull-top-pocket{
    top: 0;
}
.ju-records-opts{
    flex:none;
    font-size:15px;
    .mui-table-view-cell>a{
        display:flex;
        flex-direction:row;
        label{
            flex:none;
        }
        span{
            flex:auto;
            text-align:right;
            overflow:hidden;
            margin:0 18px;
        }
    }
    .input-cell{
        display:flex;
        flex-direction: row;
        padding:0 15px;
        height:42px;
        &>label{
            flex:none;
            line-height:20px;
            height:20px;
            padding:11px 20px 11px 0;
        }
        &>label~.cont{
            flex:auto;
            input{
                margin:0;
                padding: 11px 0;
                border:none;
                text-align:right;
                line-height:20px;
                color:#999;
                font-size:15px;
                color:@black;
            }
        }
    }
}
.ju-records-empty{
    flex:auto;
    height: 300px;
    font-size:150px;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: scroll;
    .cont{
        flex: none;
        line-height: 1;
        margin-top: 60px;
        .svg-icon{
            line-height:100%;
            opacity: 0.6;
        }
        p{
            color:@black;
            line-height:24px;
            margin-top: 10px;
        }
    }
}
.ju-records-pull-wrap{
    position:relative;
    flex:auto;
    height: 1px;
//  overflow: scroll;
    overflow: hidden;
    background:@bg;
}
.ju-records-pull-list{
    .title{
        color:@black;
    }
}